<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }

  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-cells {
    margin-top: 0;
  }

  .weui-cells_form {
    background: #fbfbfb;
  }

  .weui-cell {
    background: #fff;
  }

  #acts span {
    font-size: 14px;
  }
  .weui-label {
    text-align: left;
  }
  .weui-cell_select {
    padding: 10px 15px;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }


  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_files {
    list-style: none;
  }

  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }

  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }

  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }

  .weui_uploader_bd {
    overflow: hidden;
  }
  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }

  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }

  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }

  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }

  li.weui-uploader_file {
    display: inline-block;
    padding: 3px 5px;
  }

  ul#images {
    text-align: right;
  }
</style>
<template>
  <div class="comon">
    <div
      style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      退补货
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <input type="hidden" name="orderid" :value="id" />
        <input type="hidden" name="ordercode" :value="baseInfo.sellcode" />
        <input type="hidden" name="customerguid" :value="baseInfo.customerguid" />
        <input type="hidden" name="departid" :value="baseInfo.depguid" />
        <input type="hidden" name="departname" :value="baseInfo.depname" />
        <input v-if="backtype == 2" type="hidden" name="payee" :value="baseInfo.customername">
        <input type="hidden" name="customername" :value="baseInfo.customername">
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">编号</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly :value="baseInfo.sellcode + '  ' +baseInfo.createtime">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">申请人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly  type="text"  name="" :value="baseInfo.applyname">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">客户</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly :value="baseInfo.customername">
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">退货类型</label></div>
            <div class="weui-cell__bd">
<!--              <template v-if="baseInfo.type == 2">-->
<!--                <input class="weui-input" type="hidden" name="type" value="扣款">-->
<!--                <input class="weui-input" type="text" name="type" readonly value="4">-->
<!--              </template>-->
              <select v-if="baseInfo.type == 2" class="weui-select" name="type" v-model="backtype">
                <option value="4">扣款</option>
<!--                <option selected="" v-for="(item, index) in backtypes" :key="item.dictkey" :value="item.dictkey" :disabled="item.dictkey == 4">-->
<!--                  {{item.dicttext}}-->
<!--                </option>-->
              </select>
              <select v-else class="weui-select" name="type" v-model="backtype">
                <option value="" disabled>请选择</option>
                <option selected="" v-for="(item, index) in backtypes" :key="item.dictkey" :value="item.dictkey" :disabled="item.dictkey == 4">
                  {{item.dicttext}}
                </option>
              </select>
            </div>
          </div>
        </div>
        <div class="cellgroup">
          <template v-if="backtype == 1">
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">退款金额</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="number" name="amount" v-model="backamount">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">收款人</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text"  name="payee" v-model="payee">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">开户行</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="bank" v-model="bank">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">收款账号</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="number" name="bankaccount" v-model="bankaccount">
              </div>
            </div>
          </template>
          <template v-if="backtype == 3">
<!--            <div class="weui-cell" v-if="baseInfo.settletype == 1">-->
<!--              <div class="weui-cell__hd"><label class="weui-label">补货数量</label></div>-->
<!--              <div class="weui-cell__bd">-->
<!--                <input class="weui-input" type="number" name="count">-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="weui-cell">-->
<!--              <div class="weui-cell__hd"><label class="weui-label">补货重量</label></div>-->
<!--              <div class="weui-cell__bd">-->
<!--                <input class="weui-input" type="number" name="weight">-->
<!--              </div>-->
<!--            </div>-->
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">补货金额</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="number"  name="amount">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">收款人</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="payee" readonly :value="baseInfo.customername">
              </div>
            </div>
          </template>
          <template v-if="backtype == 4">
            <input class="weui-input" type="hidden" name="payee" readonly :value="baseInfo.customername">
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">扣款金额</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="number"  name="amount">
              </div>
            </div>
          </template>
          <div class="weui-cell weui-cell_select" v-if="backtype == 1 || backtype == 3">
            <div class="weui-cell__hd"><label class="weui-label">付款方式</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="paytype" :value="backtype == 1 ? 1 : 2" />
              <select class="weui-select" disabled name="">
                <option :selected="backtype == 1">现金付款</option>
                <option :selected="backtype == 3">非货币预收款充值</option>
              </select>
            </div>
          </div>
        </div>
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">{{remarktit}}</label></div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="remark" :placeholder="'请输入' + remarktit" rows="2"></textarea>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">附件上传</label></div>
            <div class="weui-cell__ft">
              <div class="weui_uploader_bd">
                <ul class="weui_uploader_files"></ul>
                <div class="weui_uploader_input_wrp inrow">
                  <UploadFile class="weui_uploader_input" v-on:pushfile="setFile" :orderid="baseInfo.guid"></UploadFile>
                </div>
              </div>
            </div>
            <ul class="weui-uploader_files" id="images">
              <li class="weui-uploader_file" v-for="(fil, index) in filenames" @click=delFile(fil,fileids[index])>
                {{fil}}
              </li>
            </ul>
          </div>
        </div>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary subbtn" href="javascript:" @click="postForm()">提交</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import UploadFile from "@/components/common/UploadFile";

  export default {
    name: 'AddBackinfo',
    data() {
      return {
        username: localStorage.username,
        id: '',
        baseInfo: '',
        filenames: [],
        fileids: [],
        backtypes: [],
        backtype: '',
        backamount: '',
        payee: '',
        totalOpackAmount: 0,
        title: '',
        nodeid: '',
        annex: '',
        bank: '',
        bankaccount: '',
        artoken: ''
      }
    },
    components: {UploadFile},
    computed: {
      remarktit: function () {
        let txt = '';
        switch (this.backtype) {
          case 1:
            txt = '付款事由';
            break;
          case 2:
            txt = '换货原因';
            break;
          case 3:
            txt = '详细的补货原因、补货产品及数量';
            break;
          case 4:
            txt = '扣款原因';
            break;
        }
        return txt;
      }
    },
    mounted() {
      //根据userid和时间戳生成唯一字符串
      this.artoken = this.createToken();

      let that = this;
      this.id = this.$route.query.guid;
      this.nodeid = this.$route.query.nodeid;
      this.annex = this.$route.query.annex;
      this.title = this.$route.query.title;
      this.getOrder(this.id);
      this.getBacktypes();
    },
    watch: {
      // backamount: function(val) {
      //   if (this.baseInfo.settletype != 1) return;
      //   if (val > this.totalOpackAmount) {
      //     this.toastText('退款金额不妥')
      //     this.backamount = '';
      //   }
      // }
    },
    methods: {
      getOrder: function(id) {
        this.axios({
          method: 'get',
          url: '/sales/Sellform!detail.action',
          params: {orderid: this.id}
        }).then(response => {
          if (response.data.status == 'true') {
            this.baseInfo = response.data.result;
            this.backamount = this.baseInfo.settleamount;
            this.payee = this.baseInfo.customername;
            this.baseInfo.items.filter(item => {
              this.totalOpackAmount += item.orderpack * item.price;
            })
            this.getFinance(this.baseInfo.customerguid);
            if (this.baseInfo.type == 2) {
              this.backtype = 4;
            }
          } else {
            this.toastText('获取订单数据失败！');
          }
        });
      },
      getFinance: function(customerid) {
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/sales/Customer!getFinance.action',
          params: {customerid: customerid}
        }).then(response => {
          if (response.data.msg == "success") {
            let finances = response.data.finances.length > 0 ? response.data.finances[0] : {};
            this.bank = finances.bankname;
            this.bankaccount = finances.cardcode;
          } else {
            //获取失败不做提示
          }
        });
      },
      delFile: function (name, id) {
        let that = this;
        $.confirm('确定要删除？', function () {
          that.axios({
            method: 'post',
            url: '/sales/Fileinfo!delete.action',
            params: {fileid: id}
          })
          that.fileids = that.fileids.filter(item => {
            return item != id;
          })
          that.filenames = that.filenames.filter(item => {
            return item != name;
          })
        })
      },
      setFile: function (file) {
        this.filenames.push(file.name);
        this.fileids.push(file.id);
      },
      getBacktypes: function () {
        let that = this;
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/sales/Sellform!findDict.action',
          params: {type: 112}
        }).then(response => {
          if (response.statusText == "OK") {
            this.backtypes = response.data;
          } else {
            this.toastText('获取运费计价方式数据失败');
          }
        });
      },
      //提交表单数据
      postForm: function () {
        let that = this;

        if (this.backtype == '') {
          this.toastText('请输入退货类型');
          return false;
        } if ($("textarea[name = 'remark']").val() == '') {
          this.toastText('请输入' + this.remarktit);
          return false;
        } if (this.fileids.length == 0) {
          this.toastText('请上传附件');
          return false;
        }
        if (this.backtype == 1) {
          if (this.backamount == '') {
            this.toastText('请输入退款金额');
            return false;
          }
          if (this.payee == '') {
            this.toastText('请输入收款人');
            return false;
          }
          if (this.bank == '') {
            this.toastText('请输入开户行');
            return false;
          }
          if ($("input[name = 'bankaccount']").val() == '') {
            this.toastText('请输入收款账号');
            return false;
          }
        }
        if (this.backtype == 3) {
          // if (this.baseInfo.settletype == 1 && $("input[name = 'count']").val() == '') {
          //   this.toastText('请输入补货数量');
          //   return false;
          // } if (this.baseInfo.settletype == 1 && $("input[name = 'weight']").val() == '') {
          //   this.toastText('请输入补货重量');
          //   return false;
          // }
          if ($("input[name = 'amount']").val() == '') {
            this.toastText('请输入补货金额');
            return false;
          }

        }

        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

        let postData = this.serialize2Obj($("#formid").serializeArray());
        postData.nodeid = this.nodeid;
        postData.fileids = this.fileids.join(',');

        this.axios({
          headers: {
            'artoken': this.artoken
          },
          method: 'post',
          url: '/sales/Backinfo!saveOrupdate.action',
          params: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.msg == 'repeatSubmit') {
            this.toastText('重复提交');
          } else if (response.data.msg == 'success') {
              this.toastSuccess("保存成功");
              this.$router.push({name: 'Sellform'});
          } else {
            if (response.data.msg == "outlogin") {
              this.toastText('请重新登录');
              this.artoken = this.createToken();
            } else if (response.data.msg == "canotRecharge") {
              this.toastText('预收款余额不足');
              this.artoken = this.createToken();
            } else if (response.data.msg == "noenough") {
              this.toastText('扣款金额不能大于订单结算金额');
              this.artoken = this.createToken();
            } else if (response.data.msg == "canotopt") {
              this.toastText('不允许的操作');
              this.artoken = this.createToken();
            } else {
              this.toastError('系统错误');
              this.artoken = this.createToken();
            }
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      }
    }
  }
</script>
